@section('page-title-right')
  <button type="button" class="btn btn-primary save-btn" onclick="app.submit('form')">{{ __('common.save') }}</button>
@endsection

<div class="mb-5" id="app">
  <el-form ref="form" :model="form" class="form-wrap" :inline-message="true">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>B站点域名</th>
        <th>Token</th>
        <th>状态</th>
        <th class="text-end"></th>
      </tr>
      </thead>
      <tbody v-if="form.polling_paypal.length">
      <tr v-for="(item, index) in form.polling_paypal" :key="index">
        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].domain`" class="mb-0"
            :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' => '域名']) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.domain" placeholder=""></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].token`" class="mb-0"
            :rules="[
                  { required: true, message: '{{ __('common.error_required', ['name' => 'Token']) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.token" placeholder=""></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="" prop="entry_status" class="mb-0">
            <el-switch v-model="item.status" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
        </td>
        <td>
          <el-form-item
            label="" :prop="`polling_paypal[${index}].weight`" class="mb-0"
            :rules="[
                { required: true, message: '{{ __('common.error_required', ['name' => __('PaypalSiteA::setting.entry_weight')]) }}', trigger: ['blur', 'change'] },]"
          >
            <el-input size="small" v-model="item.weight"
                      placeholder="{{ __('PaypalSiteA::setting.entry_weight') }}"></el-input>
          </el-form-item>
        </td>
        <td class="text-end">
          <button type="button" @click="form.polling_paypal.splice(index, 1)"
                  class="btn btn-outline-danger btn-sm ml-1"><i
              class="bi bi-x-lg"></i></button>
        </td>
      </tr>
      <tr>
        <td colspan="2"></td>
        <td class="text-end">
          <button type="button" @click="addRow()" class="btn btn-sm btn-outline-primary">{{ __('common.add') }}</button>
        </td>
      </tr>
      </tbody>
      <tbody v-else>
      <td colspan="3">
        <div class="d-flex align-items-center justify-content-center p-4">
          <div class="text-secondary fs-5 me-2">{{ __('common.no_data') }}</div>
          <button type="button" @click="addRow()" class="btn btn-sm btn-outline-primary">{{ __('common.add') }}</button>
        </div>
      </td>
      </tbody>
    </table>
  </el-form>
</div>

<ol class="list-group list-group-numbered lh-lg text-secondary">
  <li>Token随意写32位内的数据和字母混合的字符串，在对应B站点也要配置对应的数据，用于数据传输安全验证</li>
  <li>创建订单时会轮询各B站创建订单，请先前往各B站配置对应的商品数据</li>
  <li>B站商品编辑中会有一个A站商品ID</li>
  <li>B站商品的SKU需要与A站对应商品一样</li>
</ol>

<style>
  .el-form-item__error--inline {
    margin-left: 0;
  }

  .el-form-item__content {
    line-height: 1;
  }
</style>

<script>
  let app = new Vue({
    el: '#app',

    data: {
      form: {
        polling_paypal: @json($plugin->getSetting('setting') ?? []),
      },

      rules: {}
    },

    computed: {},

    methods: {
      submit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message.error('{{ __('common.error_form') }}');
            return;
          }

          $http.post("{{ admin_route('plugin.paypal_site_a.setting') }}", this.form.polling_paypal).then((res) => {
            layer.msg(res.message)
          })
        });
      },


      addRow() {
        this.form.polling_paypal.push({status: 1, domain: '', token: ''})
      },
    }
  })
</script>
